<template>
  <div class="ContentCent">
    <div class="map" style="width: 100%; height: 800px"></div>
    <title-bottom></title-bottom>
  </div>
</template>

<script>
import hubei from "../assets/js/hubei";
import TitleBottom from "./TitleBottom.vue";
export default {
  components: { TitleBottom },
  name: "ContentCent",
  component: {
    TitleBottom,
  },
  mounted() {
    this.getMap();
  },
  methods: {
    getMap() {
      this.$echarts.registerMap("hubei", hubei);
      var myChart = this.$echarts.init(document.querySelector(".map"));
      var mapDate = [
        {
          name: "武汉市",
          value: [114.298572, 30.584355],
          // img: "image://./map-未选中.png",
        },
      ];
      var option = {
        geo: {
          map: "hubei",
          type: "map",
          roam: true,
          scaleLimit: {
            min: 0.2,
            max: 2,
          },
          itemStyle: {
            normal: {
              areaColor: "rgba(20,41,87,0.8)",
              borderColor: "#195BB9",
              borderWidth: 1,
            },
            emphasis: {
              areaColor: "#2B91B7",
            },
          },
        },
        series: [
          {
            name: "武汉市",
            map: "wuhan",
            type: "scatter",
            coordinateSystem: "geo",
            symbolSize: 0,
            silent: "none",
            data: mapDate.map((item) => {
              return {
                name: item.name,
                value: item.value,
              };
            }),
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style>
.ContentCent {
  width: 100%;
  /* height: 100%; */
}
</style>